<template>
  <div class="lis_2">
    <div style="width: 100%; height: 85%; display: flex">
      <div class="left_lis">
        <div class="left_lis_box" v-for="(item, index) in textData.arrs" :key="index">
          <dl style="
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                box-sizing: border-box;
                padding: 10px;
              ">
            <dt style="
                  width: 25%;
                  height: 100%;
                  box-sizing: border-box;
                  background-color: #eff3ff;
                  border-radius: 10px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                ">
              <svg-icon :name="item.icon" color="#6EACFE" width="40" height="40"> </svg-icon>
            </dt>
            <dd style="width: 70%; height: 100%; margin-left: 5px">
              <h4 style="margin-bottom: 5px; white-space: nowrap">{{ item.title }}</h4>
              <span style="display: inline-block; font-size: 12px; color: #ccc">{{
                item.desc
              }}</span>
            </dd>
          </dl>
        </div>
      </div>
      <MyText :imgs="imgs"></MyText>
    </div>
    <div style="
          border-top: 1px solid #ccc;
          width: 100%;
          height: 10%;
          line-height: 75px;
          margin-top: 15px;
        ">
      <span class="span1">更多行业和场景解决方案 ></span>
    </div>
  </div>
</template>
  
<script setup lang="ts">
import MyText from '../My/MyText.vue';

const { textData } = defineProps({
  textData: {
    type: Object,
    default: {} as {}
  },
  imgs: {
    type: String,
    default: 'https://img-repo-intl.imdr.cn/dr/plan-241144/Z5FacnkXrUHZeeYsm0.jpg!w640.jpg'
  }

});
</script>
  
<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lis_2 {
  width: 970px;
  height: 550px;
  background-color: #cbc9c9;
  position: absolute;
  right: -428px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 5px 2px #ccc;
  box-sizing: border-box;
  padding: 20px 50px;
  color: #000;

  // display: none;
  .left_lis {
    width: 73%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-right: 15px;

    .left_lis_box {
      width: 48%;
      height: 100px;
      box-sizing: border-box;
      display: flex;
      line-height: 20px;
      padding: 5px;
      margin-left: 10px;
    }

    .left_lis_box:hover {
      box-shadow: 0 0 0 1px #1261ff;
      border-radius: 15px;
    }
  }

  .span1:hover {
    color: #1261ff;
  }
}
</style>
  